<template>
  <div id="app">
  	<header class="header">
  		<div class="left">
  			<img src="../img/Category.png"/>
  		</div>
  		<div class="center">
  			<input type="text" />
  			<img src="../img/搜索.png"/>
  		</div>	
  		<div class="right">
  			<img src="../img/account.png"/>
  		</div>
  	</header>
  	<ul class="nav">
  		<li v-on:click="navs" :style="colo"><router-link to="/" exact class="cc">首页</router-link></li>
  		<li v-on:click="navs"><router-link to="/call" class="cc">新番</router-link></li>
  		<li v-on:click="navs"><router-link to="/Class" class="cc">论坛</router-link></li>
  		<li v-on:click="navs"><router-link to="/other" class="cc">分类</router-link></li>
  	</ul>

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
	data(){
		return{
			colo:{
				
			}
		}
	},
 methods:{
 	navs:function(){
 		
 	}
 }

}
</script>

<style>
.header{
	height: 80px; 
	line-height: 80px;
	display: flex;  
	}
.center{
	 width: 60%;
	 height: 30px;
	 margin: 0 auto;
	 position: relative; 
}
.center img{
	  height: 20px;
    position: absolute;
    top: 31px;
    left: 10px;
}
.center input{
	width: 100%;
	height: 100%;
	padding-left: 30px;
	border-radius: 10px;
	border: none;
	border: 2px solid #ccc;
	 background: #F1F1F1;
	 outline: none;
}
.nav{
	display: flex;
}
.nav li{
	flex: 1;
	text-align: center;
	font-family: "微软雅黑";
}
.nav li .cc{
	text-decoration: none;
	color: #000;
}
.nav li .active{
	color: blue;
	border-bottom: 1px solid blue;
	padding-bottom: 20px;
}
.left,.right{
	width: 15%;
	text-align: center;
}
.left img{
	margin-top: 25px;
	height: 30px;
}
.right img{
	margin-top: 27px;
	height: 25px;
	margin-left: 10px;
}
</style>
